import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
// 无状态组件 函数式组件
function App() {
  let count = 0;
  let arr = [1, 2, 3];
  let obj = {
    name: "zs",
  };
  // jsx必须有一个父标签包裹
  return (
    <>
      <div className="App">{count === 1 ? "男" : "女"}</div>
      <span>{arr[2]}</span>
      <strong>{obj.name}</strong>
    </>
  );
}

// App就是有状态组件
/* class App extends React.Component {
  // 有状态组件一定要在constructor调用super，然后传入props
  // 核心是通过setState驱动状态变化
  // 1. 修改this.state
  // 2. setState可以触发render方法的执行
  constructor(props) {
    super(props);
    // state
    // 在组件内修改数据，使用state
    this.state = {
      count: 0,
    };
    setInterval(() => {
      this.setState({
        count: this.state.count + 1,
      });
    }, 1000);
  }
  render() {
    const { count } = this.state;
    return <div className="App">{count}</div>;
  }
} */
ReactDOM.render(<App />, document.getElementById("root"));
